<template>

  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>营销管理</el-breadcrumb-item>
      <el-breadcrumb-item>套餐管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">新建套餐</h3>
    </el-card>

    <el-card style="margin-top: 30px">
      <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addUserFormRef"
          label-width="100px"
          class="demo-ruleForm"
      >
        <el-form-item label="套餐名称" prop="name" placeholder="请输入活动名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>

        <el-form-item label="适用日期" placeholder="请选择适用日期" >
          <div class="block">
            <el-date-picker
                v-model="value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="限购个数，不填不限" prop="limit">
          <el-input v-model="addForm.limitBuy" ></el-input>
        </el-form-item>

        <el-form-item label="是否包邮" prop="freeShipping" >

          <el-tooltip  placement="top">
            <el-switch
                v-model="addForm.freeShipping"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
            >
            </el-switch>
          </el-tooltip>
        </el-form-item>


        <el-form-item label="库存" prop="stock">
          <el-input v-model="addForm.stock" ></el-input>
        </el-form-item>


      </el-form>


    </el-card>

    <el-card>
      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">
        套餐商品列表
        <el-button type="primary" style="float: right" size="mini" @click="showAdd">新增商品</el-button>
      </h3>

<!--      新增过来的表格-->
      <el-table :data="addList"  border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="商品封面">
          <template slot-scope="scope">
            <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
          </template>

        </el-table-column>
        <el-table-column label="商品名称" prop="commodityname"></el-table-column>
        <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
        <el-table-column label="套餐内单品数量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.stock" @blur="getPriceOld"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">

        <el-row :gutter="20">
          <el-col :span="8">
            <b>套餐内单品总价:</b>
            <b v-text="priceOld"></b>
          </el-col>
        </el-row>
      </h3>
        <el-row :gutter="20">
          <el-col>
            <b>套餐价格:</b>
            <el-input v-model="priceNew" ></el-input>
          </el-col>
        </el-row>

      <el-button type="primary" @click="doAdd">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-card>



<!-- 隐藏的模态框   -->
    <el-dialog title="选择商品" :visible.sync="addDialogVisible" width="50%">
      <el-card>
        <h3 style="text-align: left;border-bottom:1px solid gainsboro;padding-bottom: 5px">商品查询</h3>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
              <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin-top: 30px">
      <el-table :data="commodityList" @selection-change="idChance" border stripe>
        <el-table-column type="selection" width="60">
        </el-table-column>
        <el-table-column label="商品封面">
          <template slot-scope="scope">
            <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="commodityname"></el-table-column>
        <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
        <el-table-column label="销售量" prop="salecounts"></el-table-column>
        <el-table-column label="商品状态" prop="commoditystatus">
          <template slot-scope="s">
            <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>
          </template>
        </el-table-column>
        <el-table-column label="上架时间" prop="salestarttime"></el-table-column>


      </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>

      </el-card>
      <el-button type="primary" @click="doAdd0">确 定</el-button>
      <el-button @click="cancelAdd">取 消</el-button>
    </el-dialog>



  </div>
</template>

<script>
export default {
  data(){
    return{
      priceOld:0,
      priceNew:0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      commodityname:'',
      addForm: {

        list:[]
      },
      addFormRules: {


      },
      value1: [],
      commodityList: [],
      readyList:[],
      addList:[],
      iurl: this.$MyUrl.imgUrl+'commodity/',//图片地址
      addDialogVisible:false,
      ids:[],
    }
  },
  methods:{

    getPriceOld(){
      this.priceOld = 0;
      this.addList.forEach(value => {
        if (value.stock === undefined){
          return;
        }
        this.priceOld = this.priceOld + (value.commodityprice)*(value.stock);
      })
    },


    cancelAdd(){
      this.addDialogVisible = false;
      this.getCommodityList();
    },
    idChance(selection){
      this.readyList =[];
      for(let o of selection){
        this.readyList.push(o);
      }
    },
    doAdd0(){
      this.addList = this.readyList;
      this.addDialogVisible = false;
    },
    searchCommodity() {
      this.pageNum = 1;
      this.getCommodityList();
    },
    showAdd(){
      this.addDialogVisible = true;



    },
    doAdd(){
      this.addForm.startTime = this.value1[0];
      this.addForm.endTime = this.value1[1];
      this.addForm.list = this.addList;
      this.addForm.priceOld = this.priceOld;
      this.addForm.priceNew = this.priceNew;
      console.log(this.addForm);

      let url = "package/add";
      this.$axios.post(url,this.addForm).then(res=>{
        if (res.data.code == 200) {
          this.addForm = {};
          this.value1 = [];
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 1000
          })
          this.$router.push("/Package");
        }else{
          this.$message({
            type:"error",
            message:res.data.msg,
            duration:1000
          })
        }
      })

    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.getCommodityList();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getCommodityList();
    },
    //根据名字查列表
    getCommodityList() {
      let url = "commodity/clist";
      this.$axios.get(url, {
        params: {
          name: this.commodityname,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.commodityList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
            duration: 1000
          })
        }
      });

    },

  },
  created() {
    this.getCommodityList();
  }
}
</script>

<style scoped>

</style>